import React from 'react';
import { Form, Input } from 'antd';
import { IMetaFormProps, MetadataFormContext } from '../interface';
import { useGetExtraInfo } from '../hooks';

function Index(props: IMetaFormProps) {
  const { id, require } = props;
  const formContext: any = React.useContext(MetadataFormContext) || {};
  const extraInfo = useGetExtraInfo(formContext.fields, id, formContext.form);
  console.log('extraInfo', extraInfo);
  console.log('formContext', formContext);

  return (
    <Form.Item label={extraInfo?.label || id} name={id} rules={[{ required: require }]} help={extraInfo?.help} tooltip={extraInfo?.tooltip}>
      {extraInfo?.type === 'password' ? (
        <Input.Password placeholder={extraInfo?.placeholder} />
      ) : (
        <Input placeholder={extraInfo?.placeholder} allowClear />
      )}
    </Form.Item>
  );
}

export default React.memo(Index);
